<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>权限布局</title>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/themes/default/easyui.css"/>">
<link rel="stylesheet" type="text/css" href="<c:url value="/css/themes/icon.css"/>">

<script type="text/javascript" src="<c:url value="/js/jquery.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery.easyui.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/easyui-lang-zh_CN.js"/>"></script>

<style>
	ul,li{
		padding: 0px;
		margin: 0px;
		list-style: none;
	}
</style>

<script type="text/javascript">
	$(function(){
		//添加或激活选项卡
		$(".nav_btn").linkbutton({onClick: function(){
			var title = $(this).attr("title");
			var url = $(this).attr("url");
			
			//判断该面板是否已打开
			if($("#tt").tabs("exists", title)){
				//已存在则激活
				$("#tt").tabs("select", title);
			}else{
				//不存在
				var config = {
						title: title,
						href: url,
						closable: true
					}
				$("#tt").tabs("add", config);
			}
		}});
		
		//关闭当前
		$("#btn_close_current").linkbutton({onClick:function(){
			//获取选中的面板
			var tab = $('#tt').tabs('getSelected');
			//根据选中的面板获取该面板的索引
			var index = $('#tt').tabs('getTabIndex',tab);
			//根据索引关闭
			if(index != 0){
				$('#tt').tabs('close',index);
			}
		}})
		
		//关闭所有
		$("#btn_close_all").linkbutton({onClick:function(){
			//找到所有的面板
			var tabs = $('#tt').tabs('tabs');
			//从后往前遍历
			for(var i = tabs.length - 1; i > 0; i --){
				$('#tt').tabs('close',i);
			}
		}})
	});
</script>
</head>
<body class="easyui-layout">
  <div data-options="region:'north'" style="height:80px;"></div>
  <div data-options="region:'south'" style="height:50px;"></div>
  <div data-options="region:'west',title:'功能导航',split:true" style="width:180px;">
    <div id="aa" class="easyui-accordion" data-options="fit:true, border: false">
	  <div title="业务管理" style="overflow:auto;padding:10px;" data-options="iconCls:'icon-xqobject'">
		<ul>
		  <li><a title="部门管理" url="toDept" class="easyui-linkbutton nav_btn" data-options="iconCls:'icon-bmdept', plain:true">部门管理</a> </li>
		  <li><a title="科室管理" url="toDepart" class="easyui-linkbutton nav_btn" data-options="iconCls:'icon-ksdepart', plain:true">科室管理</a> </li>
		  <li><a title="员工管理" url="toEmp" class="easyui-linkbutton nav_btn" data-options="iconCls:'icon-ygemp', plain:true">员工管理</a> </li>
		</ul>
	  </div>
	 
	 </div>
	 </div>
     <div data-options="region:'center'">
      <div id="tt" class="easyui-tabs" data-options="fit:true, border:false, tools: '#tab-tools'">
		<div title="工作台" style="padding:20px;display:none;">
			<h1 style="text-align: center;">欢迎使用……</h1>
		</div>
		</div>
		
		<div id="tab-tools" style="border:none; border-bottom: 1px solid rgb(149,184,231);">
			<a id="btn_close_current" href="#" class="easyui-linkbutton" plain="true" iconCls="icon-remove"></a>
			<a id="btn_close_all" href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel"></a>
		</div>
    </div>
</body>
</html>